<template>
  <div ref="page_container"
       class="onekit-page-container"
       :class="onekitClass"
       :style="`width:${width};height:${height};display:${display};${onekitStyle}`"
       :id="onekitId"
       :z-index="zIndex"
       @touchstart="touchstart"
       @touchend="touchend"
       @click="_clickoverlay">
    <div ref="custom"
         style="width: 100%; height: 100%"
         @animationstart="animationstart"
         @animationend="animationend"
         @click.stop="">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import weixin_behavior from "../../behaviors/weixin_behavior";
import onekit_behavior from "../../behaviors/onekit_behavior";
export default {
  name: "onekit-page-container",
  mixins: [weixin_behavior, onekit_behavior],
  props: {
    show: {
      type: [Boolean, String],
      default: false,
    },
    duration: {
      type: [Number, String],
      default: 300,
    },
    "z-index": {
      type: [Number, String],
      default: 100,
    },
    overlay: {
      type: [Boolean, String],
      default: true,
    },
    position: {
      type: String,
      default: "bottom",
    },
    round: {
      type: [Boolean, String],
      default: false,
    },
    "close-on-slideDown": {
      type: [Boolean, String],
      default: false,
    },
    "overlay-style": {
      type: String,
    },
    "custom-style": {
      type: String,
    },
  },
  data () {
    return {
      width: "100%",
      height: "100%",
      display: "none",
      start_pageY: "",
      end_pageY: "",
    };
  },
  watch: {
    show: {
      immediate: true,
      handler (newshow, oldshow) {
        if (oldshow != undefined) {
          if (newshow) {
            this.display = "flex";
            this.animate(this.position);
          } else {
            this.unanimate(this.position);
          }
        } else {
          if (newshow) {
            this.display = "flex";
          }
        }
      },
    },
    position () {
      return;
    },
    customStyle: {
      immediate: true,
      handler (newcustomStyle, oldnewcustomStyle) {
        const custom = this.$refs.custom;
        if (oldnewcustomStyle != undefined) {
          if (newcustomStyle == "") {
            custom.style.cssText = "height:100%;width:100%;";
          } else if (newcustomStyle !== "") {
            custom.style.cssText += newcustomStyle;
          }
        }
      },
    },
    round: {
      immediate: true,
      handler () {
        return;
      },
    },
    overlay: {
      immediate: false,
      handler (newoverlay) {
        const page_container = this.$refs.page_container;
        if (newoverlay) {
          page_container.style.background = "rgba(0,0,0,0.5)";
        } else {
          page_container.style.background = "rgba(0,0,0,0)";
        }
      },
    },
    overlayStyle: {
      immediate: true,
      handler (newoverlayStyle, oldoverlayStyle) {
        const page_container = this.$refs.page_container;
        if (oldoverlayStyle !== undefined) {
          if (newoverlayStyle == "") {
            page_container.style.cssText = "height:100%;width:100%;";
          } else if (newoverlayStyle !== "") {
            page_container.style.cssText += newoverlayStyle;
          }
        }
      },
    },
    end_pageY () {
      if (this.closeOnSlideDown && this.end_pageY - this.start_pageY > 200) {
        this.unanimate(this.position);
      }
    },
  },
  mounted () {
    this.height = `${document.getElementById("app").offsetHeight - 50}px`;
    // if (this.closeOnSlideDown) {
    //   console.warn('暂不支持 "close-on-slideDown"');
    // }

  },

  methods: {
    animate (position) {
      const page_container = this.$refs.page_container;
      const custom = this.$refs.custom;
      custom.style["animation-timing-function"] = "ease-out";
      switch (position) {
        case "bottom":
          custom.style.animation = `bottom ${this.duration}ms`;

          page_container.style["justify-content"] = "flex-end";
          if (this.round) {
            custom.style["border-radius"] = "20px 20px 0 0";
          } else {
            custom.style["border-radius"] = "0 0 0 0";
          }
          break;
        case "top":
          custom.style.animation = `top ${this.duration}ms`;

          page_container.style["justify-content"] = "flex-start";
          if (this.round) {
            custom.style["border-radius"] = "0 0 20px 20px";
          } else {
            custom.style["border-radius"] = "0 0 0 0";
          }
          break;
        case "right":
          custom.style.animation = `right ${this.duration}ms`;
          break;
        case "center":
          custom.style.animation = `center ${this.duration}ms`;
          break;
        default:
          break;
      }
    },
    unanimate (position) {
      const custom = this.$refs.custom;
      switch (position) {
        case "bottom":
          custom.style.animation = `unbottom ${this.duration}ms`;
          break;
        case "top":
          custom.style.animation = `untop ${this.duration}ms`;
          break;
        case "right":
          custom.style.animation = `unright ${this.duration}ms`;
          break;
        case "center":
          custom.style.animation = `uncenter ${this.duration}ms`;
          break;
        default:
          break;
      }
      setTimeout(() => {
        this.display = "none";
      }, this.duration);
    },
    touchstart (e) {
      this.start_pageY = e.changedTouches[0].pageY;
    },
    touchend (e) {
      this.end_pageY = e.changedTouches[0].pageY;
    },
    // 监听动画开始
    animationstart (e) {
      const data = {
        timeStamp: e.timeStamp,
        target: {
          dataset: e.target.dataset,
          id: e.target.id,
          offsetLeft: e.target.offsetLeft,
          offsetTop: e.target.offsetTop,
        },
        currentTarget: {
          dataset: e.target.dataset,
          id: e.target.id,
          offsetLeft: e.target.offsetLeft,
          offsetTop: e.target.offsetTop,
        },
        mut: false,
        mark: {},
        _userTap: false,
      };
      if (this.show) {
        this._beforeenter(data);
        this._enter(data);
      } else {
        this._beforeleave(data);
        this._leave(data);
      }
    },
    // 监听动画结束
    animationend (e) {
      const data = {
        timeStamp: e.timeStamp,
        target: {
          dataset: e.target.dataset,
          id: e.target.id,
          offsetLeft: e.target.offsetLeft,
          offsetTop: e.target.offsetTop,
        },
        currentTarget: {
          dataset: e.target.dataset,
          id: e.target.id,
          offsetLeft: e.target.offsetLeft,
          offsetTop: e.target.offsetTop,
        },
        mut: false,
        mark: {},
        _userTap: false,
      };
      if (this.show) {
        this._afterenter(data);
      } else {
        this._afterleave(data);
      }
    },
    _beforeenter (data) {
      data.type = "beforeenter";
      this.$emit("Beforeenter", data);
    },
    _enter (data) {
      data.type = "enter";
      this.$emit("Enter", data);
    },
    _afterenter (data) {
      data.type = "afterenter";
      this.$emit("Afterenter", data);
    },
    _beforeleave (data) {
      data.type = "beforeleave";
      this.$emit("Beforeleave", data);
    },
    _leave (data) {
      data.type = "leave";
      this.$emit("Leave", data);
    },
    _afterleave (data) {
      data.type = "afterleave";
      this.$emit("Afterleave", data);
    },
    _clickoverlay (e) {
      const data = {
        type: "clickoverlay",
        timeStamp: e.timeStamp,
        target: {
          dataset: e.target.dataset,
          id: e.target.id,
          offsetLeft: e.target.offsetLeft,
          offsetTop: e.target.offsetTop,
        },
        currentTarget: {
          dataset: e.target.dataset,
          id: e.target.id,
          offsetLeft: e.target.offsetLeft,
          offsetTop: e.target.offsetTop,
        },
        mut: false,
        mark: {},
        _userTap: false,
      };
      this.$emit("Clickoverlay", data);
    },
  },
};
</script>

<style>
.onekit-page-container {
  position: fixed;
  top: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.onekit-page-container > :nth-child(1) {
  background-color: #fff;
  position: relative;
}

@keyframes bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes unbottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes top {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes untop {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes unright {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes center {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes uncenter {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
